<template>
  <div>
    <el-tree
      ref="tree"
      :data="myPageList"
      :props="{label:'name'}"
      :highlight-current="true"
      :expand-on-click-node="false"
      node-key="id"
      default-expand-all
      @node-click="clickTree"
    >
      <div slot-scope="{ node, data }" class="custom-tree-node">
        <div v-if="node.level===2">
          <el-radio v-model="form.pageId" :label="data.id">
            <img
              v-if="data.type"
              :src="require('@/assets/icon/app/i-page-'+data.type+'.png')"
              alt
              srcset
              class="i-page-type"
            >
            {{ data.name }}
          </el-radio>
        </div>
        <div v-else>
          <span>{{ data.name }}</span>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import { getPageList } from '@/views/wxaBuildModule/api/page'

export default {
  props: {
    row: {
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      classifyCode: 'DEFAULT',
      myPageList: [],
      uniquePage: [],
      form: {
        pageId: null
      }
    }
  },

  computed: {},
  created() {
  },
  mounted() {
    this.getPageTree()
  },
  methods: {
    /**
     * 数据组
     */
    // 默认Tree
    defaultMyPage() {
      return new Promise((resolve, reject) => {
        this.myPageKeylist = {}
        const myPageList = JSON.parse(
          JSON.stringify(wxaBuildConfig[this.classifyCode].pageTree)
        )
        // this.uniquePage = wxaBuildConfig[this.classifyCode].uniquePage
        // for (let i = 0; i < myPageList.length; i++) {
        //   const item = myPageList[i]
        //   if (this.uniquePage.includes(item.id)) {
        //     myPageList.splice(i, 1)
        //     i--
        //   }
        // }
        this.myPageList = myPageList
        resolve()
      })
    },

    // 获取列表
    async getPageTree() {
      await this.defaultMyPage()
      this.loading = true
      getPageList({ classifyCode: this.classifyCode })
        .then((res) => {
          this.myPageList.forEach((level1) => {
            res.data.forEach((level2) => {
              if (level2.type === level1.id) {
                level1.children.push(level2)
                // if (level2.id === this.row.insideParams.pageId) {
                //   this.$refs.tree.setCurrentKey(level2.id);
                // }
              }
            })
          })
          console.log(this.row.insideParams.pageId)
          this.form.pageId = this.row.insideParams.pageId
          if (this.form.pageId) {
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.row.insideParams.pageId)
            })
          }
        })
        .catch((err) => {
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 点击tree
    clickTree(data, node) {
      if (node.level !== 2) return
      const params = {
        insidePage: data.type,
        path: node.parent.data.openPath,
        mode: node.parent.data.openMode,
        insideParams: {
          insidePageType: 'MYPAGE',
          pageId: data.id,
          remark:
              '站内链接 > 我的页面 > ' +
              node.parent.data.name +
              ' > ' +
              data.name
        }
      }
      this.$emit('selectInsideLink', { type: 'MYPAGE', params })
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.custom-tree-node {
  width: 100%;
  font-size: 14px;

  .el-radio {
    height: 24px;
    line-height: 24px;
    width: 100%;
  }

  .i-page-type {
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
}
</style>
